<template>
  <div class="p-4 mx-auto max-w-5xl">
    <h2 class="mb-4 text-xl font-bold">Markdown 编辑/预览</h2>
    
    <div class="flex flex-col gap-4 md:flex-row">
      <!-- 编辑区 -->
      <div class="flex-1">
        <div class="flex justify-between items-center mb-2">
          <h3 class="font-bold">编辑</h3>
          <div class="flex gap-2">
            <button @click="insertTemplate('heading')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">标题</button>
            <button @click="insertTemplate('bold')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">粗体</button>
            <button @click="insertTemplate('italic')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">斜体</button>
            <button @click="insertTemplate('link')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">链接</button>
            <button @click="insertTemplate('image')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">图片</button>
            <button @click="insertTemplate('code')" class="px-2 py-1 text-xs text-white bg-blue-500 rounded">代码</button>
          </div>
        </div>
        <textarea 
          v-model="markdownText" 
          class="w-full h-[500px] p-4 font-mono border rounded resize-none" 
          placeholder="在此输入Markdown文本..."></textarea>
        <div class="flex justify-between mt-2">
          <button @click="clearText" class="px-3 py-1 text-gray-700 bg-gray-200 rounded">清空</button>
          <button @click="exportMarkdown" class="px-3 py-1 text-white bg-green-500 rounded">导出</button>
        </div>
      </div>
      
      <!-- 预览区 -->
      <div class="flex-1">
        <h3 class="mb-2 font-bold">预览</h3>
        <div 
          class="h-[500px] p-4 overflow-auto border rounded markdown-body"
          v-html="renderedMarkdown"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { marked } from 'marked'

const markdownText = ref(`# Markdown 示例

## 基础语法

**粗体文本** 和 *斜体文本*

### 列表示例
- 项目1
- 项目2
- 项目3

### 链接和图片
[Vue.js官网](https://vuejs.org)

![Vue Logo](https://vuejs.org/images/logo.png)

### 代码示例
\`\`\`javascript
function hello() {
  console.log('Hello Markdown!');
}
\`\`\`

### 表格
| 表头1 | 表头2 |
|-------|-------|
| 内容1 | 内容2 |
| 内容3 | 内容4 |
`)

// 渲染Markdown
const renderedMarkdown = computed(() => {
  try {
    return marked(markdownText.value)
  } catch (e) {
    return '<div class="text-red-500">渲染错误: ' + e.message + '</div>'
  }
})

// 插入模板
function insertTemplate(type) {
  const textarea = document.querySelector('textarea')
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selected = markdownText.value.substring(start, end)
  
  let insertion = ''
  
  switch (type) {
    case 'heading':
      insertion = `## ${selected || '标题'}`
      break
    case 'bold':
      insertion = `**${selected || '粗体文本'}**`
      break
    case 'italic':
      insertion = `*${selected || '斜体文本'}*`
      break
    case 'link':
      insertion = `[${selected || '链接文字'}](https://example.com)`
      break
    case 'image':
      insertion = `![${selected || '图片描述'}](https://example.com/image.jpg)`
      break
    case 'code':
      insertion = `\`\`\`\n${selected || '代码块'}\n\`\`\``
      break
  }
  
  markdownText.value = 
    markdownText.value.substring(0, start) + 
    insertion + 
    markdownText.value.substring(end)
  
  // 设置光标位置
  setTimeout(() => {
    textarea.focus()
    textarea.selectionStart = start + insertion.length
    textarea.selectionEnd = start + insertion.length
  }, 0)
}

// 清空文本
function clearText() {
  if (confirm('确定要清空编辑器内容吗？')) {
    markdownText.value = ''
  }
}

// 导出Markdown
function exportMarkdown() {
  const blob = new Blob([markdownText.value], { type: 'text/markdown' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'markdown_export_' + new Date().toISOString().slice(0, 10) + '.md'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}
</script>

<style>
.markdown-body h1 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.markdown-body h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.markdown-body h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.markdown-body ul, .markdown-body ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}
.markdown-body ul {
  list-style-type: disc;
}
.markdown-body ol {
  list-style-type: decimal;
}
.markdown-body code {
  background-color: #f0f0f0;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}
.markdown-body pre {
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 5px;
  overflow: auto;
  margin-bottom: 1em;
}
.markdown-body pre code {
  background-color: transparent;
  padding: 0;
}
.markdown-body table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}
.markdown-body th, .markdown-body td {
  border: 1px solid #ddd;
  padding: 8px;
}
.markdown-body img {
  max-width: 100%;
}
.markdown-body a {
  color: #3b82f6;
  text-decoration: underline;
}
</style> 